<template>
	<view>
		<view class="orderdetail">
			<view class="main-box">
				<view class="box_top z-margin-lr-32 z-margin-t-32 z-margin-b-8">
					<view class="z-font-w title">{{ info.orderLog[0].content }}</view>
					<view @tap="clickshow" class="z-flex">
						<text class="z-padding-r-16">状态跟踪</text>
						<u-icon color="#FFF" name="arrow-up" v-if="show"></u-icon>
						<u-icon color="#FFF" name="arrow-down" v-else></u-icon>
					</view>
				</view>
				<view class="z-margin-lr-32 time z-font-22">{{ tool.formatTime(info.orderLog[0].createtime) }}</view>

				<u-transition :show="show" mode="slide-down">
					<view class="status-box z-margin-32">
						<view class="status-top">
							<image src="/static/service/orderstatus.png" class="icon"></image>
							<view class="z-font-24">状态跟踪</view>
						</view>
						<view class="status-list z-radius-b-20">
							<view class="list z-padding-32" v-for="(item,index) in info.orderLog">
								<view class="circle z-margin-r-32"></view>
								<view class="status">
									<view class="z-font-26 z-margin-b-8">{{ item.content }}</view>
									<view class="z-font-22 text_666">{{ tool.formatTime(item.createtime) }}</view>
								</view>
							</view>
						</view>
					</view>
				</u-transition>

				<view class="order_content z-padding-32">
					<block v-if="info.to_shop === 'shop'">
						<view class="ercode_box z-margin-tb-32 z-padding-32 z-radius-24">
							<view class="ercode_box_top">
								<image :src="cdn(info.detail.image)" class="ercode_box_img z-radius-24 z-margin-r-24" mode="aspectFill" />
								<view class="ercode_box_top_right">
									<view class="ercode_box_top_right_item">
										<view>{{ info.detail.name }}</view>
									</view>
									<view class="z-font-24 text_666"></view>
									<view class="money">￥{{ info.detail.price }}</view>
								</view>
							</view>
							<u-divider text=""></u-divider>
							<view class="z-flex-y-c">
								<view class="z-font-32" @tap="copyclick(info.check_name)">核销码：{{ info.check_name }}</view>
								<image :src="cdn(info.qrcode_image,1)" class="ercodeimg" mode="aspectFill" />
							</view>
						</view>
						<view class="newshop_info z-margin-tb-32 z-padding-32 z-radius-24">
							<view>{{ info.shopInfo.abbr }}</view>
							<view class="z-margin-t-16 newshop_info_addressbox">
								<view class="text_999 z-font-24 z-flex-1 z-padding-r-24">
									<view>{{ info.shopInfo.province }}{{ info.shopInfo.city }}{{ info.shopInfo.district }}{{ info.shopInfo.address }}</view>
									<view class="z-margin-t-8">营业时间：{{ info.shopInfo.trade_hour }}</view>
								</view>
								<view class="newshop_info_addressbox_right">
									<view class="line"></view>
									<view class="newshop_info_addressbox_item z-padding-lr-32" @tap="openLoaction">
										<image src="../../static/index/shopposition.png" class="position" mode="" />
										<view class="text_999 z-font-24 z-margin-t-16">导航</view>
									</view>
									<view class="newshop_info_addressbox_item" @tap="call(info.shopInfo.leader_mobile)">
										<image src="../../static/index/phone.png" class="position" mode="" />
										<view class="text_999 z-font-24 z-margin-t-16">电话</view>
									</view>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="order_info z-padding-24 z-radius-24">
							<view class="order_content_time z-flex z-font-22">预约时间</view>
							<view class="order_content_time_text z-font-w z-margin-tb-32">
								{{ tool.formatTime(info.starttime, 'mm:dd') }}
								<text class="hour">{{ tool.formatTime(info.starttime, 'HH:MM') }}</text>
							</view>
							<view class="address z-font-w">
								{{ info.orderAddress.province }}{{ info.orderAddress.city }}{{ info.orderAddress.district }}{{ info.orderAddress.address }}
							</view>
							<view class="my_box z-margin-tb-32 z-font-28 text_999">
								<view>
									<text class="z-padding-r-16">{{ info.orderAddress.name }}</text>
									<text>{{ info.orderAddress.mobile }}</text>
								</view>
							</view>
						</view>
						<view class="sikll_box z-margin-tb-32 z-padding-32 z-radius-24" v-if="info.skillInfo">
							<view>服务者</view>
							<view class="z-flex-1"></view>
							<view class="sikll_box_right">
								<image :src="cdn(info.skillInfo.image)" class="sikll_box_img" mode="" />
								<view class="z-margin-l-16">{{ info.skillInfo.name }}</view>
							</view>
							<image class="phone z-margin-l-32" @tap="call(info.skillInfo.mobile)" src="/static/service/phone.png"></image>
						</view>
					</block>

					<view class="shop_info z-margin-tb-32 z-padding-32 z-radius-24">
						<view class="project z-margin-tb-32">
							<image :src="cdn(info.detail.image)" class="project_img z-radius-24 z-margin-r-24" mode="aspectFill" />
							<view class="project_right">
								<view>{{ info.detail.name }}</view>
								<view class="project_right_bottom">
									<view>
										<text class="money z-font-w">¥{{ info.detail.price }}</text>
										<text class="z-font-28 text_999"></text>
									</view>
									<view class="text_999 z-font-24">×{{ info.detail.num }}</view>
								</view>
							</view>
						</view>

						<u-divider text=""></u-divider>
						<view class="z-flex-c z-margin-t-32" v-if="info.discount < 100">
							<view class="z-font-26">会员价</view>
							<view class="z-flex-1"></view>
							<text class="money">￥{{ tool.toFix((info.price * info.discount) / 100) }}</text>
							<view class="discount z-flex z-font-24 z-padding-lr-8 z-margin-l-24">{{ info.discount / 10 }}折</view>
						</view>
						<view class="coupons_box" v-if="info.coupon_price > 0">
							<view class="coupons_box_left z-font-26">
								<image src="/static/service/yhq.png" class="yhq_img z-margin-r-16" mode="" />
								<view class="z-font-26">优惠券</view>
							</view>
							<view>
								<text class="money z-font-26">-￥{{ info.coupon_price }}</text>
							</view>
						</view>
						<view class="coupons_box z-margin-tb-32" v-if="info.premium_price">
							<view class="coupons_box_left">
								<view class="z-font-26">补差价</view>
							</view>
							<view>
								<text class="z-font-26">￥{{ info.premium_price }}</text>
							</view>
						</view>
						<view class="coupons_box z-margin-tb-32" v-for="(item,index) in info.adddetail">
							<view class="coupons_box_left">
								<view class="z-font-26">加项（{{ item.name }}/{{ item.cost_seconds }}分钟/数量:{{ item.num }}）</view>
							</view>
							<view>
								<text class="z-font-26">￥{{ tool.toFix(item.price * item.num) }}</text>
							</view>
						</view>
						<view class="coupons_box z-margin-tb-32" v-if="info.travel_price">
							<view class="coupons_box_left">
								<view class="z-font-26">车费</view>
							</view>
							<view>
								<text class="z-font-26">￥{{ info.travel_price }}</text>
							</view>
						</view>
						<u-divider text=""></u-divider>
						<view class="all">
							<text class="z-font-24 text_999">合计：</text>
							<text class="z-font-w z-font-32">￥{{ info.payprice }}</text>
						</view>
						<view class="all z-margin-t-16" v-if="info.refund_price > 0">
							<text class="z-font-24 text_999">（退款金额：</text>
							<text class="refund z-font-24">￥{{ info.refund_price }}</text>
							<text class="z-font-24 text_999">）</text>
						</view>
					</view>
					<view class="orderinfo z-margin-tb-32 z-padding-32 z-radius-24">
						<view class="orderinfo_item">
							<view class="text_999 z-font-24">订单编号：</view>
							<view class="z-font-24">
								<text class="z-padding-r-16">{{ info.orderId }}</text>
								<text class="z-font-24 copy z-padding-lr-8 z-radius-8" @tap="copyclick(info.orderId)">复制</text>
							</view>
						</view>
						<view class="orderinfo_item z-margin-tb-32" v-if="info.paytime">
							<view class="text_999 z-font-24">下单时间：</view>
							<view class="z-font-24">
								<text class="z-padding-r-16">{{ tool.formatTime(info.paytime) }}</text>
							</view>
						</view>
						<view class="orderinfo_item z-margin-tb-32">
							<view class="text_999 z-font-24">支付方式：</view>
							<view class="z-font-24">
								<text class="z-padding-r-16">{{ info.paytype === 4 ? '余额' : '微信' }}</text>
							</view>
						</view>
						<view class="orderinfo_item z-margin-tb-32">
							<view class="text_999 z-font-24">备注：</view>
							<view class="z-font-24">
								<text class="z-padding-r-16">{{ info.memo }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="order_bottom z-padding-lr-32 z-padding-t-32" :style="'padding-bottom:' + safeBottom">
				<view class="order_bottom_left" @tap="toreport" v-if="info.status > 0">
					<image src="/static/service/warring.png" class="warring_img" mode="" />
					<view class="text_999 z-font-24 z-margin-t-16">举报</view>
				</view>
				<view class="z-flex-1" v-else></view>
				<view class="order_bottom_right">
					<u-button type="primary" class="z-margin-r-32" color="#FF9600" v-if="info.status === 0" @tap="waitpay">立即支付</u-button>
					<u-button plain class="z-margin-r-32" @tap="toapplyrefund" v-if="info.status > 0  && info.is_service !== 2 && info.is_settle < 2">
						申请退款
					</u-button>
					<u-button type="primary" class="z-margin-r-32" color="#FF9600" v-if="info.status > 1 && info.status < 6" @tap="setAdd">加项</u-button>
					<u-button type="primary" @tap="setUp" v-if="info.status > 0 && info.status < 6">补差价</u-button>
				</view>
			</view>
		</view>
		
		<u-popup :show="upshow" mode="center" :round="10" closeable @close="onClose">
			<view class="popbox z-padding-32">
				<view class="z-flex z-font-w z-font-30">补差价</view>
				<view class="input_box z-padding-24 z-radius-24 z-margin-tb-32">
					<view class="z-font-30">补差价金额</view>
					<input placeholder="￥0.00" type="digit" v-model="price" />
				</view>
				<view class="z-font-22 text_999">*请与服务人员协商一致后再支付，如有异议请联系平台客服。平台仅对在线支付的项目提供交易保障，请勿线下支付</view>
				<u-divider text=""></u-divider>
				<view class="popbox_bottom">
					<view class="popbox_bottom_money">
						总计：
						<view class="money z-font-w">￥{{ price }}</view>
					</view>
					<u-button type="primary" style="width: 160rpx;height: 80rpx;" @tap="uppay" text="立即支付" color="#07C160"></u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="addShow" mode="center" :round="10" closeable @close="onaddClose">
			<view class="popbox z-padding-32">
				<view class="z-flex z-font-w z-margin-b-24">加项</view>
				<scroll-view scroll-y="true" :show-scrollbar="false" :enhanced="true" style="height: 700rpx" @scrolltolower="pluscd">
					<view class="plus_item z-padding-24 z-radius-24 z-margin-b-24" v-for="(item,index) in addList">
						<view class="plus_item_left">
							<view class="z-font-w z-font-26">{{ item.name }}</view>
							<view class="z-margin-t-16">
								<text class="money z-font-26">￥{{ item.price }}</text>
								<text class="z-font-22">/{{ item.cost_seconds }}分钟</text>
							</view>
						</view>
						<!-- <van-stepper theme="round" min="{{0}}" integer value="{{ item.num }}" data-index="{{index}}" @change="plusonChange" /> -->
					</view>
				</scroll-view>
				<view class="text_999 z-font-22 z-margin-tb-32">*请与服务人员协商一致后再支付，如有异议请联系平台客服。平台仅对在线支付的项目提供交易保障，请勿线下支付</view>
				<u-divider text=""></u-divider>
				<view class="popbox_bottom">
					<view class="popbox_bottom_money">
						总计：
						<view class="money z-font-w">￥{{ allprice }}</view>
					</view>
					<u-button type="primary" style="width: 160rpx;height: 60rpx;" @tap="addpay" text="立即支付" color="#07C160"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import http from '../../utils/http';
export default {
	data() {
		return {
			show: false,
			addShow: false,
			upshow: false,
			order_id: '',
			info: '',
			safeBottom: `30px`,
			addList: [],
			allprice: '',
			price: ''
		};
	},
	onLoad(options) {
		this.order_id = options.id;
	},
	onShow() {
	    this.getInfo()
	  },
	methods: {
		waitpay() {
			this.util.skip('/service/paypage/paypage?price=' + this.info.payprice + '&order_id=' + this.info.id + '&type=1');
		},
		addpay() {
			let add_ids = [];
			for (let i = 0; i < this.addList.length; i++) {
				if (this.addList[i].num > 0) {
					add_ids.push(this.addList[i].id + '-' + this.addList[i].num);
				}
			}
			if (add_ids.length === 0) return this.util.toast('请选择需要加的项目');
			this.addShow = false
			uni.navigateTo({
				url: '/service/paypage/paypage?add_ids=' + add_ids.join(',') + '&order_id=' + this.order_id + '&type=2' + '&price=' + this.allprice
			});
		},
		uppay() {
			if (!this.price) return this.util.toast('请输入差价金额');
			this.upshow = false
			uni.navigateTo({
				url: '/service/paypage/paypage?price=' + this.price + '&order_id=' + this.order_id + '&type=3'
			});
		},
		setAdd() {
			http.get('goods/goodsaddlist', {
				id: this.info.detail.goods_id
			}).then((res) => {
				if (res.data.length === 0) {
					this.util.toast('该项目暂无可加的项目');
				} else {
					let arr = res.data.map((value) => {
						value.num = 0;
						return value;
					});
					this.addShow = true,
					this.addList = arr
				}
			});
		},
		setUp() {
			this.upshow = true
		},
		onaddClose() {
			this.addShow = false,
			this.allprice = 0
		},
		onClose() {
			this.upshow = false
		},
		
		plusonChange(event) {
			let index = event.currentTarget.dataset.index;
			this.addList[index].num = event.detail;
			let allprice = 0;
			for (let i = 0; i < this.addList.length; i++) {
				allprice += this.addList[i].num * this.addList[i].price;
			}
			this.addList = this.addList,
			this.allprice = allprice
		},
		getInfo() {
			http.get('order/orderInfo', {
				id: this.order_id
			}).then((res) => {
				this.info = res.data
			});
		},
		//跳转举报
		toreport() {
			this.util.skip('/service/report/report?order_id=' + this.order_id, {
				applyReport: () => {
					this.getInfo();
				}
			});
		},
		//申请退款
		toapplyrefund() {
			this.util.skip('/service/applyrefund/applyrefund?order_id=' + this.order_id, {
				applyRefund: () => {
					this.getInfo();
				}
			});
		},
		clickshow() {
			this.show = this.show == true ? false : true
		},
		openLoaction() {
			uni.openLocation({
				latitude: Number(this.info.shopInfo.lat),
				longitude: Number(this.info.shopInfo.lng),
				name: this.info.shopInfo.address,
				scale: 18
			});
		},
		call(event) {
			uni.makePhoneCall({
				phoneNumber: event,
			});
		},
		copyclick(event) {
			uni.setClipboardData({
				data: event,
				success(res) {
					this.util.toast('已复制');
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: linear-gradient(0deg, #e3fdce 0%, #62cb81 100%);
}

.orderdetail {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}
.main-box {
	flex: 1;
	overflow-y: auto;
}

.box_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
}

.title {
	font-size: 40rpx;
}

.time {
	color: #fff;
}
status-box {
	background: #fff;
}
.status-top {
	background: #62cb81;
	display: flex;
	align-items: center;
	height: 71rpx;
	border-radius: 20rpx;
	color: #fff;
}
.icon {
	margin-top: -8rpx;
	width: 524rpx;
	height: 71rpx;
}

.status-list {
	background: #fff;
	margin-top: -10rpx;
}
.list {
	display: flex;
	align-items: flex-start;
	position: relative;
}
.list::before {
	content: '';
	position: absolute;
	left: 38rpx;
	top: 50rpx;
	height: 140rpx;
	width: 1rpx;
	background-color: #edeef1;
}
.list:last-of-type::before {
	display: none;
}
.circle {
	width: 13rpx;
	height: 13rpx;
	border-radius: 50%;
	background-color: #edeef1;
	margin-top: 14rpx;
}

.order_content {
	background-color: #edf1f4;
	width: 100vw;
	border-radius: 30rpx 30rpx 0 0;
	margin: 30rpx auto 0;
	position: relative;
	box-sizing: border-box;
}

.order_content_time {
	background-color: #f5f7fb;
	height: 44rpx;
	width: 120rpx;
	color: #6b738b;
	border-radius: 6rpx;
}

.order_info {
	background-color: #fff;
	box-sizing: border-box;
}

.order_content_time_text {
	font-size: 40rpx;
}

.hour {
	color: $uni-maingreencolor;
}

.my_box {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.my_box_img {
	width: 32rpx;
	height: 32rpx;
}

.my_box_bz {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.my_box_bz_one {
	flex: 1;
}

.my_box_bz_two {
	flex: 3;
}

.sikll_box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 686rpx;
	margin: 0 auto;
	background-color: #fff;
	box-sizing: border-box;
}

.sikll_box_img {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
}

.sikll_box_right {
	display: flex;
	align-items: center;
}

.phone {
	width: 40rpx;
	height: 40rpx;
}

.shop_info {
	width: 686rpx;
	box-sizing: border-box;
	background-color: #fff;
}

.project {
	display: flex;
	align-items: center;
}

.project_img {
	width: 120rpx;
	height: 120rpx;
}

.project_right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 120rpx;
	flex: 1;
}

.money {
	color: $uni-maingreencolor;
}

.project_right_bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.coupons_box {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.coupons_box_left {
	display: flex;
	align-items: center;
}

.yhq_img {
	width: 30rpx;
	height: 26rpx;
}

.all {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.orderinfo {
	width: 686rpx;
	margin: 0 auto;
	box-sizing: border-box;
	background-color: #fff;
}

.orderinfo_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.copy {
	border: 1rpx solid $uni-maingreencolor;
	color: $uni-maingreencolor;
}

.order_bottom {
	width: 100vw;
	background-color: #fff;
	height: 200rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.block {
	width: 100vw;
	height: 150rpx;
	background-color: #f6f8fa;
}

.warring_img {
	width: 40rpx;
	height: 40rpx;
}

.order_bottom_left {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.order_bottom_right {
	display: flex;
	align-items: center;
}
.u-button {
	border-radius: 15rpx !important;
}
.ercode_box {
	width: 686rpx;
	background-color: #fff;
	margin: 0 auto;
	box-sizing: border-box;
}
.ercode_box_top {
	display: flex;
	align-items: center;
}
.ercode_box_img {
	width: 120rpx;
	height: 120rpx;
}
.fourbox_name_left {
	color: #f7c566;
	background-color: #1c274c;
	width: 48rpx;
	height: 28rpx;
	border-radius: 4rpx;
	flex-shrink: 0;
}
.ercode_box_top_right {
	display: flex;
	flex-direction: column;
	height: 120rpx;
	justify-content: space-between;
}
.ercode_box_top_right_item {
	display: flex;
	align-items: center;
}
.ercodeimg {
	width: 364rpx;
	height: 364rpx;
}
.newshop_info {
	background-color: #fff;
	width: 686rpx;
	margin: 0 auto;
	box-sizing: border-box;
}
.newshop_info_addressbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.line {
	width: 1rpx;
	height: 100rpx;
	background-color: #edeef1;
}
.newshop_info_addressbox_right {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.newshop_info_addressbox_item {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.position {
	width: 40rpx;
	height: 40rpx;
}

.popbox {
	width: 686rpx;
	box-sizing: border-box;
}

.money {
	color: #ff9600;
}
.input_box {
	background-color: #f5f7f9;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
input {
	text-align: right;
}
.popbox_bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.popbox_bottom_money {
	display: flex;
	align-items: center;
}
.u-button {
	border-radius: 15rpx !important;
}
.plusbox {
	box-sizing: border-box;
}
.plus_item {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #f5f7f9;
}
.plus_item_left {
	display: flex;
	flex-direction: column;
}

.discount {
	height: 32rpx;
	background: #2c2b31;
	color: #f6e0b9;
	border-radius: 5rpx;
}

.refund {
	color: #ff9600;
}
</style>
